<template>
	<el-carousel autoplay=true :interval="3000" pause-on-hover=true arrow="always" height="500px" motion-blur>
		<el-carousel-item v-for="(image, index) in images" :key="index">
			<img :src="image" alt="carousel image" style="width: 100%; height: 100%; object-fit: contain" />
		</el-carousel-item>
	</el-carousel>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const images = ref([
		'../static/beautifulSister/1683370516881.png',
		'../static/beautifulSister/1683370530512.png',
		'../static/beautifulSister/1683370535979.png',
		'../static/beautifulSister/1683370542400.png',
		'../static/beautifulSister/1683370548180.png',
		'../static/beautifulSister/1683370553492.png',
		'../static/beautifulSister/1683370560681.png'
	])
</script>

<style scoped>
	.el-carousel__item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>